<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1400px" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="auto">
        <el-row :gutter="20" type="flex" style="flex-wrap: wrap">
          <el-col :span="6">
            <el-form-item label="来源类型" prop="sourceType">
              <el-select v-model="formData.sourceType" placeholder="请选择来源类型" filterable clearable style="width: 100%"
                         @change="handleSourceTypeChange"
                         :disabled="isDetailMode">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.QUALITY_SOURCE_TYPE)"
                           :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据日期" prop="orderDate">
              <el-date-picker
                v-model="formData.orderDate"
                type="date"
                placeholder="请选择单据日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                :disabled="isDetailMode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源单号" prop="sourceNo">
              <el-input v-model="formData.sourceNo" placeholder="请输入来源单号" style="width: 100%"
                        :disabled="isDetailMode"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model="formData.businessType" placeholder="请选择业务类型" filterable clearable size="small"
                         style="width: 100%" @change="handleBusinessTypeChange"
                         :disabled="isDetailMode">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.OUTBOUND_TYPE)" :key="dict.value"
                           :label="dict.label"
                           :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库仓库" prop="outWarehouseId">
              <treeselect v-model="formData.outWarehouseId" :options="warehouseTree" :normalizer="normalizerW"
                          placeholder="选择出库仓库" style="width: 100%" @select="onWarehouseChange"
                          :disabled="isDetailMode"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库库位" prop="outStoreId">
              <el-select v-model="formData.outStoreId" placeholder="请选择出库库位" clearable size="small"
                         style="width: 100%"
                         :disabled="isDetailMode">
                <el-option v-for="location in locationList" :key="location.id" :label="location.storageLocationName"
                           :value="location.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库仓库" prop="inWarehouseId">
              <treeselect v-model="formData.inWarehouseId" :options="warehouseTree" :normalizer="normalizerW"
                          placeholder="选择入库仓库" style="width: 100%;box-sizing: border-box"
                          @select="onWarehouseInChange"
                          :disabled="isDetailMode"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库库位" prop="inStoreId">
              <el-select v-model="formData.inStoreId" placeholder="请选择入库库位" clearable size="small"
                         style="width: 100%"
                         :disabled="isDetailMode">
                <el-option v-for="location in locationInList" :key="location.id" :label="location.storageLocationName"
                           :value="location.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 物料表格 -->
        <el-form-item label="物料明细" prop="materialList">
          <el-button v-if="!isDetailMode" type="primary" size="mini" @click="addSupply" style="margin-bottom: 10px;">
            <i class="el-icon-plus"></i> 新增物料
          </el-button>
          <el-table :data="formData.materialList" style="width: 100%" border max-height="400px">
            <el-table-column label="序号" type="index" width="80" align="center"/>
            <el-table-column label="物料" align="center">
              <template slot-scope="scope">
                <div v-if="isDetailMode">
                  {{ scope.row.materialName || '未选择物料' }}
                </div>
                <el-select v-else
                           v-model="scope.row.materialId"
                           placeholder="请输入物料名称"
                           filterable
                           remote
                           :remote-method="(query) => remoteMethod(query)"
                           :loading="materialLoading"
                           style="width: 100%"
                           @change="handleMaterialSelect($event, scope.$index)"
                >
                  <el-option v-for="material in materialList" :key="material.id" :label="material.materialName"
                             :value="material.id">
                    <span style="float: left">{{ material.materialName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ material.materialNo }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.quantity" placeholder="数量" size="small"
                          :disabled="isDetailMode"/>
              </template>
            </el-table-column>
            <el-table-column prop="batchNo" label="批次号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.batchNo" placeholder="请输入批次号" size="small"
                          :disabled="isDetailMode"/>
              </template>
            </el-table-column>
            <el-table-column v-if="!isDetailMode" label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSupply(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!isDetailMode" type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as OrderApi from '@/api/warehouse/order';
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
import * as WarehouseApi from "@/api/storage/warehouse";
import * as LocationApi from "@/api/storage/location";
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import * as MaterialApi from "@/api/basic/material";

export default {
  name: "WarehouseOrderOut",
  components: {
    Treeselect
  },
  data() {
    return {
      materialList: [],
      // 仓库树数据
      warehouseTree: [],
      // 库位列表
      locationList: [],
      locationInList: [],
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      // 是否为详情模式
      isDetailMode: false,
      formData: {
        id: undefined,
        orderType: 2,
        orderDate: '',
        sourceType: undefined,
        sourceTypeName: undefined,
        sourceNo: undefined,
        businessType: undefined,
        businessTypeName: undefined,
        outWarehouseId: undefined,
        outStoreId: undefined,
        inWarehouseId: undefined,
        inStoreId: undefined,
        materialList: []
      },
      // 表单校验
      formRules: {},
      materialLoading: false
    };
  },
  created() {
    this.getWarehouseTree();
  },
  methods: {
    /** 新增：获取物料列表方法，默认获取前50条 */
    async getMaterialList() {
      try {
        this.materialLoading = true;
        const params = {
          pageNo: 1,
          pageSize: 50
        };
        const res = await MaterialApi.getMaterialPage(params);
        this.materialList = res.data.list;
      } catch (error) {
        console.error('获取物料列表失败:', error);
        this.materialList = [];
      } finally {
        this.materialLoading = false;
      }
    },

    /** 新增：物料远程搜索方法 */
    async remoteMethod(query) {
      if (query) {
        this.materialLoading = true;
        try {
          const params = {
            pageNo: 1,
            pageSize: 100,
            materialName: query
          };
          const res = await MaterialApi.getMaterialPage(params);
          this.materialList = res.data.list;
        } catch (error) {
          console.error('获取物料列表失败:', error);
          this.materialList = [];
        } finally {
          this.materialLoading = false;
        }
      } else {
        // 如果查询条件为空，默认显示前50条
        await this.getMaterialList();
      }
    },

    /** 处理来源类型变化 */
    handleSourceTypeChange(value) {
      if (value) {
        const dictData = this.getDictDatas(DICT_TYPE.QUALITY_SOURCE_TYPE);
        const selected = dictData.find(item => parseInt(item.value) === value);
        if (selected) {
          this.formData.sourceTypeName = selected.label;
        }
      } else {
        this.formData.sourceTypeName = '';
      }
    },

    /** 处理业务类型变化 */
    handleBusinessTypeChange(value) {
      if (value) {
        const dictData = this.getDictDatas(DICT_TYPE.OUTBOUND_TYPE);
        const selected = dictData.find(item => parseInt(item.value) === value);
        if (selected) {
          this.formData.businessTypeName = selected.label;
        }
      } else {
        this.formData.businessTypeName = '';
      }
    },

    /** 新增：物料选择后处理 */
    handleMaterialSelect(material, index) {

    },

    /** 初始化物料明细的物料信息 */
    async initMaterialDetails() {
      // 为物料明细中的每个物料调用remoteMethod以加载物料信息
      for (const item of this.formData.materialList) {
        if (item.materialName) {
          await this.remoteMethod(item.materialName);
        }
      }
    },
    /** 添加物料明细行 */
    addSupply() {
      const newSupply = {
        materialId: undefined,
        materialCode: '',
        quantity: null,
        batchNo: ''
      };
      this.formData.materialList.push(newSupply);
    },

    /** 删除物料明细行 */
    removeSupply(index) {
      this.formData.materialList.splice(index, 1);
    },
    /** 获取仓库树数据 */
    async getWarehouseTree() {
      try {
        const params = {
          pageNo: 1,
          pageSize: 1000 // 获取足够多的数据用于构建树
        };
        const res = await WarehouseApi.getWarehousePage(params);
        this.warehouseTree = res.data
      } catch (error) {
        console.error('获取仓库树数据失败:', error);
        this.$modal.msgError('获取仓库树数据失败');
      }
    },

    /** 树节点标准化处理 */
    normalizerW(node) {
      const result = {
        id: node.id,
        label: node.warehouseName,
        children: undefined
      };
      // 只有当children存在且不为undefined且长度大于0时才添加该字段
      if (node.children && node.children.length > 0) {
        result.children = node.children;
      }
      return result;
    },

    /** 仓库选择变化时触发 */
    async onWarehouseChange(warehouseId) {
      this.formData.outStoreId = null;
      if (warehouseId) {
        await this.getLocationList(warehouseId.id);
      } else {
        this.locationList = [];
      }
    },

    /** 入库仓库选择变化时触发 */
    async onWarehouseInChange(warehouseId) {
      this.formData.inStoreId = null;
      if (warehouseId) {
        await this.getLocationInList(warehouseId.id);
      } else {
        this.locationInList = [];
      }
    },

    /** 根据仓库ID获取出库库位列表 */
    async getLocationList(warehouseId) {
      try {
        const params = {
          pageNo: 1,
          pageSize: 100,
          warehouseId: warehouseId
        };
        const res = await LocationApi.getLocationPage(params);
        this.locationList = res.data.list;
      } catch (error) {
        console.error('获取库位列表失败:', error);
        this.locationList = [];
      }
    },

    /** 根据仓库ID获取入库库位列表 */
    async getLocationInList(warehouseId) {
      try {
        const params = {
          pageNo: 1,
          pageSize: 100,
          warehouseId: warehouseId
        };
        const res = await LocationApi.getLocationPage(params);
        this.locationInList = res.data.list;
      } catch (error) {
        console.error('获取库位列表失败:', error);
        this.locationInList = [];
      }
    },

    /** 打开弹窗 */
    async open(id, isDetail = false) {
      this.dialogVisible = true;
      this.reset();
      this.isDetailMode = isDetail;

      // 修改或查看详情时，设置数据
      if (id) {
        this.formLoading = true;
        try {
          const res = await OrderApi.getOrder(id);
          this.formData = res.data;

          // 如果有出库仓库ID，获取对应的库位列表
          if (res.data.outWarehouseId) {
            await this.getLocationList(res.data.outWarehouseId);
          }

          // 如果有入库仓库ID，获取对应的库位列表
          if (res.data.inWarehouseId) {
            await this.getLocationInList(res.data.inWarehouseId);
          }

          // 初始化物料明细信息
          await this.initMaterialDetails();

          this.dialogTitle = isDetail ? "查看单据详情" : "修改仓库单据";
        } finally {
          this.formLoading = false;
        }
      } else {
        this.dialogTitle = "新增仓库单据";
      }
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      try {
        const data = this.formData;
        // 修改的提交
        if (data.id) {
          await OrderApi.updateOrder(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit('success');
          return;
        }
        // 添加的提交
        await OrderApi.createOrder(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit('success');
      } finally {
        this.formLoading = false;
      }
    },
    /** 表单重置 */
    reset() {
      // 不重置isDetailMode，保持传入的模式状态
      this.formData = {
        id: undefined,
        orderType: 2,
        sourceType: undefined,
        sourceTypeName: undefined,
        sourceNo: undefined,
        businessType: undefined,
        businessTypeName: undefined,
        outWarehouseId: undefined,
        outStoreId: undefined,
        inWarehouseId: undefined,
        inStoreId: undefined,
        materialList: []
      };
      this.locationList = [];
      this.locationInList = [];
      this.resetForm("formRef");
    }
  }
};
</script>


<style scoped lang="scss">

:deep(.el-input__inner:disabled),
:deep(.el-select__inner:disabled),
:deep(.el-date-editor .el-input__inner:disabled),
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #F9F9F9 !important;
  color: #333 !important;
  border-color: #DCDFE6 !important;
}

:deep(.vue-treeselect--disabled) {
  background-color: #F9F9F9 !important;
  .vue-treeselect__control {
    background-color: #F9F9F9 !important;
    color: #333 !important;
  }
}
</style>
